<template>
    <div class="page ">
        <div class="section">
            <div class="doing">
                <div class="shopDetail">
                    <img class="lazy2_1" :src="detail.url" :style="winHeight">
                    <span :class="detail.status==1?'begin':detail.status==2?'soon':'ongoing'">{{statusName}}</span>
                </div>
            </div>
            <div class="doinginfo">
                <div class="h3">{{detail.title}}</div>
                <div class="info">
                    <dl>
                        <dt>活动日期</dt>
                        <dd>{{detail.activityDate}}</dd>
                    </dl>
                    <dl>
                        <dt>咨询电话</dt>
                        <dd><a href="">{{detail.phone}}</a></dd>
                    </dl>
                    <dl>
                        <dt>活动地址</dt>
                        <dd>{{detail.address}}</dd>
                    </dl>
                    <dl>
                        <dt>活动规则</dt>
                        <dd>
                            <ul v-html="htmlRule">

                            </ul>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {Toast,Dialog} from 'vant';
    export default {
        name: "ShopDetail",
        data(){
            return {
                id:'',
                detail:{
                    title:'',
                    url:'',
                    activityDate:'',
                    phone:'',
                    address:'',
                    type:'',
                    status:'',
                    rule:''
                },
                statusName:'',
                htmlRule:'',
                winHeight:{height:'187.5px'}
            }
        },
        mounted() {
            this.id = this.$route.query.id
            if(this.id == undefined){
                Dialog.alert({
                    title: '提示',
                    message: '数据加载失败'
                }).then(() => {
                    // on close
                })
            }
            this.winHeight.height = document.body.clientWidth/2 + 'px'
            this.$api.shop.shopActivityDetail({id: this.id}).then(res=>{
                if(res.code==0){
                    var data = JSON.parse(res.data)
                    var success = data.success
                    if(success){
                        this.detail = data
                        if(data.status != 1 && data.status != 2){
                            this.statusName = '进行中'
                        }
                        this.htmlRule = data.rule
                    }else{
                        Dialog.alert({
                            title: '提示',
                            message: data.msg
                        }).then(() => {
                            // on close
                        })
                    }
                }
            }).catch(err=>{
                console.log(err)
            })
        }

    }
</script>

<style scoped>
    .page {
        max-width: 640px;
        background: #f1f5f8;
        position: relative;
        min-height: 100%;
        min-width: 320px;
        margin: 0 auto;
        font-size: 12px;
    }
    .section {
        padding: 3% 3% 0 3%;
    }
    .doing {
        position: relative;
    }
    .doing .pic img {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .doing img {
        width: 100%;
    }
    .shopDetail span.soon {
        background: url(/images/weixin2/soon.png) left top no-repeat;
    }
    .shopDetail span.begin {
        background: url(/images/weixin2/begin.png) left top no-repeat;
    }
    .shopDetail span.ongoing {
        background: url(/images/weixin2/ongoing.png) left top no-repeat;
    }
    .shopDetail span.soon, .shopDetail span.begin, .shopDetail span.ongoing {
        width: 84px;
        height: 84px;
        border-radius: 0;
        padding: 0;
        text-indent: -9999em;
        left: 0;
        top: 0;
    }
    .shopDetail span {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #fd6769;
        border-radius: 50px;
        color: #fff;
        font-size: 12px;
        padding: 1% 4%;
        margin: 0;
    }
    .doinginfo {
        background: #fff;
        border: 1px solid #e0e8f3;
        border-top: 0;
        padding: 3%;
        position: relative;
    }
    .doinginfo .h3 {
        font-size: 1.0rem;
        color: #627e94;
        font-weight: normal;
        line-height: 22px;
    }
    .doinginfo .info {
        padding-top: 3%;
    }
    .doinginfo .info dl {
        padding: 15px 0;
        font-size: 3.73vw;
        overflow: hidden;
        margin: 0;
    }
    .doinginfo .info dt {
        color: #627e94;
        background: url(/images/weixin2/hbg1.png) no-repeat;
        background-size: contain;
        padding-left: 4vw;
        float: left;
        width: 16.94vw;
    }
    .doinginfo .info dd {
        color: #91a7b5;
        line-height: 20px;
        padding-left: 4vw;
        float: left;
        word-break: break-all;
        width: 60.88vw;
        margin: 0;
    }
    .doinginfo .info dd a {
        color: #91a7b5;
    }
</style>
